<script setup lang='ts'>
import { type FormItemRule } from 'element-plus';
import { reactive } from 'vue';


const formModel = reactive({

  contractDuration: 1,
  seasonCardProfitRatio: 60,
  battleRefreshProfitRatio: 60,
  giftRevenueRatio: 60,
  remark: ''
})
const formRule = reactive<Partial<Record<keyof typeof formModel, FormItemRule[]>>>({

})
</script>

<template>
  <div>
    <ElCard>
      <h3 class="mb-4">主播信息</h3>
      <ElDescriptions border :column="2">
        <ElDescriptionsItem label='签约主播昵称'>
          帕皮将
        </ElDescriptionsItem>
        <ElDescriptionsItem label='手机号'>
          13333333333
        </ElDescriptionsItem>
        <ElDescriptionsItem label='姓名'>
          姜逸磊
        </ElDescriptionsItem>
        <ElDescriptionsItem label='身份证号'>
          654224190811299322
        </ElDescriptionsItem>
      </ElDescriptions>
    </ElCard>
    <ElCard class="mt-4">
      <div class="mb-4 flex items-center justify-between">

        <h3>合作基础信息</h3>
        <div>
          <ElButton plain type="primary">
            查看修改内容
          </ElButton>
          <ElButton plain type="primary">
            修改
          </ElButton>
          <ElButton plain type="danger">
            解除合同
          </ElButton>
        </div>
      </div>

      <ElForm label-position="top" class="max-w-xl mx-auto" :model="formModel" :rules="formRule">
        <ElFormItem label="签约时长" prop=contractDuration>
          <ElSelect v-model="formModel.contractDuration" filterable placeholder="请选择">
            <ElOption v-for="item of 5" :label="`${item}年`" :value="item" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="赛季卡收益比例" prop=seasonCardProfitRatio>
          <div class="w-4/6 mx-auto">
            <ElSlider v-model="formModel.seasonCardProfitRatio" :min="10" :max="90" placeholder="请输入" />
          </div>
        </ElFormItem>
        <ElFormItem label="战场刷新收益比例" prop=battleRefreshProfitRatio>
          <div class="w-4/6 mx-auto">
            <ElSlider v-model="formModel.battleRefreshProfitRatio" :min="10" :max="90" placeholder="请输入" />
          </div>
        </ElFormItem>
        <ElFormItem label="礼物收益比例" prop=giftRevenueRatio>
          <div class="w-4/6 mx-auto">
            <ElSlider v-model="formModel.giftRevenueRatio" :min="10" :max="90" placeholder="请输入" />
          </div>
        </ElFormItem>

        <ElFormItem label="个人介绍和留言" prop=remark>
          <ElInput v-model="formModel.remark" type="textarea" rows="3" :maxlength="200" placeholder="主播的个人介绍或留言内容..." />
        </ElFormItem>
        <div class="w-1/2 text-center mx-auto text-sm">
          <span class="text-red-400">注意：</span>
          <span class="text-zinc-700 dark:text-gray-300 ">签约后，指挥和机构均不能单方面违约，无法单方面解除绑定关系，需在双方协商同意后才能解除绑定。</span>
        </div>
        <div class="text-center my-4">
          <h2 class="text-green-700">请仔细核对合作信息...</h2>
        </div>

        <div class="text-center my-4">
          <h2 class="text-red-500">合作信息已修改，等待对方主播确认...</h2>
        </div>
        <div class="text-center my-4">
          <h2 class="text-green-700">合作中...</h2>
        </div>
        <div class="text-center  text-sm flex items-center justify-center gap-2">
          <ElCheckbox></ElCheckbox>
          <div>
            <span>我已阅读并同意</span>
            <span class="text-blue-500 cursor-pointer">《主播入驻机构服务协议》</span>
          </div>
        </div>
        <div class="text-center">
          <ElButton type="primary" class="w-2/6">
            拒绝
          </ElButton>
          <ElButton type="warning" class="w-2/6 mt-2">
            确认信息
          </ElButton>
        </div>
      </ElForm>
    </ElCard>
  </div>
</template>

<style lang='scss' scoped></style>
